<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>品牌植入订单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="3.css">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
    <script src="common/jquery.min.js"></script>
    <script src='common/autosize.js'></script>
</head>

<body>
    <div class="code">
        <div class="title">品牌植入订单</div>
        <form action="xxxxxxx.php" method="post">
            <div class="content">
                <div class="intable">
                    <div class="pick" id="zong">
                        <input type="checkbox" ck=0>
                        <i class="fa fa-check" aria-hidden="true"></i>
                    </div>
                    <span>intable 志</span>
                </div>
                <div class="box">
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck=0>
                                <i class="fa fa-check" aria-hidden="true"></i>
                            </div>
                            <div class="tit">
                                <span>基本植入</span>
                            </div>
                        </div>
                        <div class="number">
                            <select id="select">
                                <option value="5"> 5</option>
                                <option value="10"> 10</option>
                                <option value="15"> 15</option>
                                <option value="20"> 20</option>
                            </select>
                            <i class="fa fa-angle-down" aria-hidden="true"></i>
                            <span>场</span>
                        </div>
                        <div class="allPrice">
                            <span class="all">计</span>
                            <span class="price">￥100</span>
                        </div>
                    </div>
                    <ul class="cont">
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">品牌产品展示</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">一场10-20人的体验活动(可作为微信粉丝抽奖福利或VIP活动)</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">现场照片拍摄－体验店拍摄(每场环境3张，产品3张，活动细节图3张，互动3张)</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">体验导师KOL的深度体验帖(1篇／5场，可作为微信主题内容帖或其他传播)</span>
                            </div>
                        </li>
                    </ul>
                    <div class="extra">
                        附加:
                    </div>
                    <div class="person">
                        <div class="in">
                            <span class="zm">i</span>
                            <span class="zm">n</span>
                            <span class="mes">来宾定向邀约</span>
                        </div>
                    </div>
                    <ul class="pickPerson">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>品牌邀约
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥0</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>intable邀约
                            </div>
                            <textarea style="resize: none" class="tj" name="" id="textarea1" placeholder="  请输入邀约条件"></textarea>
                            <!-- <input type="text"  placeholder=""> -->
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>课时费
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥5000</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="box2">
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck=0>
                                <i class="fa fa-check" aria-hidden="true"></i>
                            </div>
                            <div style="background-image: url(./icon/icon2.png)" class="tit">
                                <span>内容策划</span>
                            </div>
                        </div>
                        <div class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">￥10000</span>
                        </div>
                    </div>
                    <ul class="cont">
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">KOL现场引导品牌相关内容(结合原体验内容植入产品)</span>
                            </div>
                        </li>
                    </ul>
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck=0>
                                <i class="fa fa-check" aria-hidden="true"></i>
                            </div>
                            <div style="background-image: url(./icon/icon3.png)" class="tit">
                                <span>场地布置</span>
                            </div>
                        </div>
                        <div class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">￥10000</span>
                        </div>
                    </div>
                    <textarea style="resize: none" name="" id="textarea1" placeholder="  输入具体布置要求"></textarea>
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck=0>
                                <i class="fa fa-check" aria-hidden="true"></i>
                            </div>
                            <div style="background-image: url(./icon/icon4.png)" class="tit">
                                <span>主题策划</span>
                            </div>
                        </div>
                        <div class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">￥20000</span>
                        </div>
                    </div>
                    <ul class="cont">
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">品牌定制主题</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">KOL甄选／邀约／日常沟通</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">KOL主题阐述</span>
                            </div>
                        </li>
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">邀请函设计</span>
                            </div>
                        </li>
                    </ul>
                    <div class="base">
                        <div class="list">
                            <div class="pick" pick="none">
                                <input type="checkbox" ck=0>
                                <i class="fa fa-check" aria-hidden="true"></i>
                            </div>
                            <div style="background-image: url(./icon/icon5.png)" class="tit">
                                <span>品牌定制工具</span>
                            </div>
                        </div>
                        <div class="allPrice">
                            <span class="all">合计</span>
                            <span class="price">&nbsp;&nbsp;待定</span>
                        </div>
                    </div>
                    <textarea name="" id="textarea" placeholder=" 输入具体内容：                                               如印有品牌logo的妈妈围裙；料理工具或餐具等"></textarea>
                </div>
                <div style="padding-top: 20px" class="intable">
                    <div class="pick" id="zong">
                        <input type="checkbox" ck=0>
                        <i class="fa fa-check" aria-hidden="true"></i>
                    </div>
                    <span>intable 秀</span>
                </div>
                <div class="box3">
                    <ul class="cont">
                        <li>
                            <div class="in">
                                <span class="zm">i</span>
                                <span class="zm">n</span>
                                <span class="mes">专业团队现场视频及高清细节图片拍摄(体现氛围／互动／品牌产品)</span>
                            </div>
                        </li>
                    </ul>
                    <ul class="pickPerson">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>短视频/GIF(4-6条/5场)
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥10000</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>1分钟视频/5场
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥20000</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>3分钟视频/5场
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥50000</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>H5设计及制作
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥20000</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--  intable 课程  -->
                <!--  intable 课程  -->
                <!--  intable 课程  -->
                <div style="padding-top: 20px" class="intable">
                    <div class="pick" id="zong">
                        <input type="checkbox" ck=0>
                        <i class="fa fa-check" aria-hidden="true"></i>
                    </div>
                    <span>intable 课</span>
                </div>
                <div class="box3">
                    <ul class="pickPerson">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>全程课程视频录制(45分钟-1个小时)
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>后期编辑成收费网络课堂
                            </div>
                        </li>
                        <li>
                            <div style="margin-left: 49vw" class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥10000</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- intable 说 -->
                <!-- intable 说 -->
                <!-- intable 说 -->
                <div style="padding-top: 20px" class="intable">
                    <div class="pick" id="zong">
                        <input type="checkbox" ck=0>
                        <i class="fa fa-check" aria-hidden="true"></i>
                    </div>
                    <span>intable 说</span>
                </div>
                <div class="box3">
                    <ul class="pickPerson">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>KOL引领来宾互动环节(品牌设定或KOL提供互动话题)
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>用户口碑＋KOL引导与总结,形成社交媒体热门话题文章
                            </div>
                        </li>
                        <li>
                            <div style="margin-left: 49vw" class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">￥10000</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- intable 传播 -->
                <!-- intable 传播 -->
                <!-- intable 传播 -->
                <div style="padding-top: 20px" class="intable">
                    <div class="pick" id="zong">
                        <input type="checkbox" ck=0>
                        <i class="fa fa-check" aria-hidden="true"></i>
                    </div>
                    <span>intable 传播</span>
                </div>
                <div class="box3">
                    <ul class="pickPerson">
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>KOL自媒体发布
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">待定</span>
                            </div>
                        </li>
                        <li>
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>网络平台直播
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">待定</span>
                            </div>
                        </li>
                        <li>
                            <div style="margin-bottom: 5px" class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>KOL集群传播
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">待定</span>
                            </div>
                        </li>
                        <textarea name="" id="textarea" placeholder=" 输入KOL类别需求及粉丝量需求"></textarea>
                        <li style="margin-top: 1px;">
                            <div class="mes">
                                <div class="pick" pick="none">
                                    <input type="checkbox" ck=0>
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>广泛性传播(其他网络传播方式)
                            </div>
                            <div class="allPrice">
                                <span class="all">合计</span>
                                <span class="price">待定</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="computed">
                <div class="list1">
                    <span>总计：</span>
                    <span style="color: red" id="total">待定</span>
                </div>
                <input type="submit" value="提交" class="sub">
            </div>
        </form>
    </div>
    <script>
    //每场价格
    var basePrice = 200;
    var inp = $('input[type=checkbox]');


    //总场数价格
    var changePrice = 0;
    changePrice = $('#select').val();
    $('.allPrice').eq(0).find('.price').html('￥' + changePrice * 10000)
        //下拉框的变化
    $('#select').change(function() {
        changePrice = $('#select').val();
        $('.allPrice').eq(0).find('.price').html('￥' + changePrice * 10000);
        compute()
    });
    //总选

    inp.eq(0).change(function() {
        if ($(this).attr('ck') == 0) {
            for (var b = 0; b < 2; b++) {
                inp.eq(b).attr('ck', 1);
                inp.eq(b).next().show()
            }
        } else {
            for (var b = 0; b < 2; b++) {
                inp.eq(b).attr('ck', 0);
                inp.eq(b).next().hide()
            }
        }

        compute();
    })
    inp.eq(14).change(function() {
        if ($(this).attr('ck') == 0) {
            for (var b = 14; b < 17; b++) {
                inp.eq(b).attr('ck', 1);
                // inp.eq(b).next().show()

            }
        } else {
            for (var b = 15; b < 17; b++) {
                inp.eq(b).attr('ck', 0);
                // inp.eq(b).next().hide()
            }
        }
        compute();
    })


    //变化时价格总计
    function compute() {
        var total = 0;

        for (var k = 0; k < inp.length; k++) {
            if (k == 0) {

            } else if (k == 1 || k == 5 || k == 6 || k == 7) {
                if (inp.eq(k).attr('ck') == 1) {
                    var tmp = inp.eq(k).parents('.base').find('.price').html();
                    tmp = tmp.substring(1)
                    total += parseFloat(tmp)
                }
            } else if (k == 3 || k == 9 || k == 14 || k == 17 || k == 18 || k == 19 || k == 20 || k == 21) {

            } else {
                if (inp.eq(k).attr('ck') == 1) {
                    var tmp = inp.eq(k).parents('li').find('.price').html();
                    tmp = tmp.substring(1)
                    total += parseFloat(tmp)
                }
            }


        };
        console.log(total)
        $('#total').html('￥' + total);
    }
    //单选框的变化
    $('.pick').find('i').hide();
    for (var m = 0; m < inp.length; m++) {
        if (m > 0) {
            inp.eq(m).change(function() {
                if ($(this).attr('ck') == 0) {
                    $(this).attr('ck', 1);
                    $(this).next().show()
                } else {
                    $(this).next().hide()
                    $(this).attr('ck', 0);
                }
                compute()
            })
        }
    }
    </script>
    <script>
    autosize(document.querySelectorAll('textarea'));
    </script>
</body>

</html>
